Next JS - Dinamik Sitemap Oluşturma

20 Ekim 2024

#Yazılım#Next.Js#React#Sitemap#Seo

Web siteleri için sitemap oluşturma google başta olmak üzere arama motorlarında, site sayfalarının gözükmesi için çok önemlidir. Web sitenizin ulaşılabilir olması ve çko fazla insan tarafından ziyaret edilmesi için yapılan yazılımsal çalışamlara "seo" (search engine optimization) işlemleri deniyor. Seo işlemleri için yapılabilecek bir çok işlem var, farklı teknikler kullanabilirsiniz. Seo işlemleri ile ilgili çalışmalar ayrı bir yazının konusu olabilir. Bu yazımda size seo işlemi için en önemli araçlardan biri olan sitemap oluşturmayı anlatacağım.

Sitemap dedimiz dosya arama motorlarının sitenizdeki sayfa veya sayfaları dizinine alması ve arama sonuçlarında göstermesi açısından çok önemlidir. Sitemap dosyayısıyl arama motoruna adeta yol gösterirsiniz. Sitemap dosyaları statik ve dinamik olarak ikiye ayrılmaktadır. Statik sitemap dosyaları bir kere oluştuktan sonra tekrar değişmeyen adı üstünde statik durağan dosyalardır. Dinamik sitemap dosyaları ise sitenizin url yolları sıklıkla değişiyor, yeni ürünler, yeni sayfalar ekleniyorsa, bunları sitemap dosyanıza otomatik eklenmesini sağlayan dosyadır. Serverdan veya direk veritabanınınızdan gelen bilgilere göre belirli sıklıklarla sitemap dosyanız otomatik güncellenebilir. Bu yazımda size son söylediğim özellikte bir sitemap oluşturmayı göstereceğim.

- Öncelikle NextJs app dizininde sitemap.js veya typescript kullanıyorsanız sitemap.ts isminde bir dosya oluşturuyoruz.

- Oluşturduğumuz dosyada dinamik olmayan

export default function sitemap() {
  const siteUrl = process.env.NEXT_PUBLIC_BASE_URL;
  return [
    {
      url: siteUrl,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.6,
    },
    {
      url: `${siteUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.5,
    },
    {
      url: `${siteUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority:0.5,
    },
  ];
}

- Yukarıda gösterdiğim örnek dinamik olmayan bir metadata örneği. Site anasayfası, about ve contact sayfaları metadata'ya eklenmiş oluyor.

- Şimdi bu dosyaya değiken metadataları ekleyeceğiz.

- Örnek olayımızda ürün sayfalarımız olsun. Her ürün için değişen sayfa uzantısı bulunsun. Her yeni ürün eklendiğinde veya silindiğinde metadata güncellensin.

- Bu örneğimizde ürün adı, aynı zamanda sayfa uzantısı olsun

const allProducts = await fetchData();

const productsDataMap = allProducts.map((item:) => ({
    url:`${siteUrl}/product/${item.title.toString()}`,
    lastModified:item.updated_at||item.created_at||item.date,
    changeFrequency:"monthly",
    priority:0.8,
}));

- Veritabanından veya serverdan sayfalanacak tüm ürünleri çekiyoruz.

- Statik meta data dosyanında bulunan her sayfa için ayrı oluşturulan metadata bilgilerini, gelen data dosyamızndan liste halinde oluşturuyoruz.

- Şimdi oluşturduğumuz fonksiyonu önceki dosyamızla birleştirelim

export const revalidate = 43200;

export default async function sitemap() {
  constsiteUrl=process.env.NEXT_PUBLIC_BASE_URL;

  const allProducts = await fetchData();

  const productsDataMap = allProducts.map((item:) => ({
    url: `${siteUrl}/product/${item.title.toString()}`,
    lastModified: item.updated_at || item.created_at || item.date,
    changeFrequency:"monthly",
    priority:0.8,
  }));

  return [
    {
      url:siteUrl,
      lastModified:newDate(),
      changeFrequency:"monthly",
      priority:0.6,
    },
    {
      url:`${siteUrl}/about`,
      lastModified:newDate(),
      changeFrequency:"monthly",
      priority:0.5,
    },
    {
      url:`${siteUrl}/contact`,
      lastModified:newDate(),
      changeFrequency:"monthly",
      priority:0.5,
    },
    ...productsDataMap,
  ];
}

- Burada görüleceği üzere oluşturduğumuz listeyi (productsDataMap), alta ekledik.

- Çok önemli bir nokta da "export const revalidate = 43200" en üste eklediğimiz bu kod. Burada 43200 saniye oluyor. Bu kodu eklemezsek yeni data eklendiğinde bu liste güncellenmiyor. Bu kod sayesinde her 43200 saniyede bir (12 saat) metadata dosyası veritabanından data çekerek değişiklik olup olmadığını kontrol ediyor.

- Sitemap dosyamızı, "url"/sitemap.xml adresine giderek kontrol edebilirsiniz. Aşağıdakine benzer bir görüntü olacaktır.

<url>

<loc>https://"url"</loc>